<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<title>标签云服务(LabelCloud)，跨企业的标签管理平台</title>
	<meta name="description" content="标签云服务(LabelCloud)，跨企业的标签管理平台">
	<meta name="author" content="www.labelCloud.cn">
    <link rel="stylesheet" href="../bootstrap.min.css"/>

    <style>
        .validatebox{
            display: inline-block;
            width: 40%;
            height: 34px;
            margin: 1px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 0px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
        }
        .validatebox:focus {
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
        }

        .validatebox::-moz-placeholder {
            color: #999;
            opacity: 1
        }

        .validatebox:-ms-input-placeholder {
            color: #999
        }

        .validatebox::-webkit-input-placeholder {
            color: #999
        }

        .validatebox[disabled], .validatebox[readonly], fieldset[disabled] .validatebox {
            background-color: #eee;
            opacity: 1
        }

        .validatebox[disabled], fieldset[disabled] .validatebox {
            cursor: not-allowed
        }

        textarea.validatebox {
            height: auto
        }
    </style>

</head>
    
<body>
    <br /><br /><br />
    <div style="margin: 50px">
        <input id="validatebox" class="validatebox" placeholder="验证框" />
        <label style=""></label>
    </div>
<script src="../jquery-1.11.2.min.js"></script>
<script src="../bootstrap.min.js"></script>
<script type="text/javascript">

    $("#validatebox").blur(check);

    function check(){
        var number = $("#validatebox").val();
        if(number != ""){
            var regEX = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if(regEX.test(number)){
                $("#validatebox").next().html("<span style='color:green;margin-left: 15px;font-style: italic'>OK</span>");
            }else{
                $("#validatebox").next().html("<span style='color: red;margin-left: 15px;font-style: italic'>邮箱邮箱格式不正确！</span>");
            }
        }else{
            $("#validatebox").next().html("<span style='color: red;margin-left: 15px;font-style: italic'>邮箱不能为空！</span>");
        }

    }
</script>
</body>